<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card class="box-card">
    <h1>商家简介</h1>
    <!-- 图片卡片 -->
    <template>
      <div class="PhotoSet" v-for="(item, index) in tableData" :key="index">
        <img :src="item.url" class="image" />
        <div class="pp">
          <div>商家{{ item.name }}</div>
          <div>地址：{{ item.posision }}</div>
          <div>联系电话：{{ item.phone }}</div>
          <div>
            <el-button
              class="button"
              type="primary"
              size="mini"
              plain
              @click="LookMore(index)"
              >查看更多</el-button
            >
          </div>
        </div>
      </div>
    </template>
  </el-card>
</template>
      
      <script>
export default {
  created() {},
  data() {
    return {
      input: "",
      tableData: [
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic4.canyin375.com_uploads_allimg_200928_1-20092Q52P2291.jpg&refer=http___pic4.canyin375.webp",
          name: "书宜烧仙草",
          posision: "东软后街",
          phone: "132xxx243",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic4.canyin375.com_uploads_allimg_200928_1-20092Q52P2291.jpg&refer=http___pic4.canyin375.webp",
          name: "书宜烧仙草",
          posision: "东软后街",
          phone: "132xxx243",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic4.canyin375.com_uploads_allimg_200928_1-20092Q52P2291.jpg&refer=http___pic4.canyin375.webp",
          name: "书宜烧仙草",
          posision: "东软后街",
          phone: "132xxx243",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic4.canyin375.com_uploads_allimg_200928_1-20092Q52P2291.jpg&refer=http___pic4.canyin375.webp",
          name: "书宜烧仙草",
          posision: "东软后街",
          phone: "132xxx243",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic4.canyin375.com_uploads_allimg_200928_1-20092Q52P2291.jpg&refer=http___pic4.canyin375.webp",
          name: "书宜烧仙草",
          posision: "东软后街",
          phone: "132xxx243",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic4.canyin375.com_uploads_allimg_200928_1-20092Q52P2291.jpg&refer=http___pic4.canyin375.webp",
          name: "书宜烧仙草",
          posision: "东软后街",
          phone: "132xxx243",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic4.canyin375.com_uploads_allimg_200928_1-20092Q52P2291.jpg&refer=http___pic4.canyin375.webp",
          name: "书宜烧仙草",
          posision: "东软后街",
          phone: "132xxx243",
        },
      ],
    };
  },
  methods: {
    LookMore(val) {
      console.log(val);
      this.$router.push("/ShangMore");
    },
  },
};
</script>
      
  <style scoped slot="less">
.el-input {
  display: inline-block;
}
h1 {
  text-align: center;
}
/* 图片卡片 */

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.PhotoSet {
  background-color: rgb(241, 241, 241);
  display: inline-block;
  padding-top: 30px;
  border-radius: 20px;
  box-shadow: 3px 6px rgba(168, 166, 166, 0.6);
  margin: 50px 60px;
  height: 100%;
  width: 25%;
}
.pp {
  text-align: center;
  padding: 10px;
}
.button {
  margin-top: 10px;
  padding: 10px;
  font-size: 17px;
}

.image {
  width: 80%;
  margin-left: 10%;
  display: block;
}
</style>
      